IT1-2-4 Oppsummering av 90-tallsnettsider

IT1 2023-09-21

Plan for dagen

Læringspunkter fra nettsidene
Lære fargeforløpning i CSS
Lage «magisk tekst»-effekten

See the Pen Magic text by stalegjelsten (@stalegjelsten) on CodePen.

Læringspunkter fra nettsider

Finn ut hvilke av disse punktene du har syndet mot. Diskuter med sidemannen og skriv ned en begrunnelse for hvorfor punktet er viktig.

Lag en egen mappe til prosjektet. Bruk filnavn uten æ, ø, å eller mellomrom
Lag en index.html
Lagre alle filer før du leverer
<html lang="no">
Ikke last inn flere fonter enn nødvendig
Husk ALT-tekst

Fargeforløpninger / gradienter

En fargeforløpning er en gradvis overgang mellom ulike farger. Boksen ovenfor er en div som viser en lineær forløpning fra lilla til turkis og tilbake til lilla.

div {
	background: linear-gradient(90deg, #a050e8 0%, #00ff88 50%, #ff00ff 100%); 
	aspect-ratio: 8/1; 
	border-radius: 1vw;
}

Fargeløpninger i CSS hos Ståles notater

Ved å skrive linear-gradient får vi en lineær (rettlinjet) forløpning. Inne i parentesen etter linear-gradient har jeg lagt inn følgende parametere

90deg for at forløpningen skal gå i en rett linje fra venstre mot høyre
#a050e8 0% definerer at fargen a050e8 skal ha være på sitt sterkeste helt ved starten av forløpningen
#00ff88 50% definerer at fargen 00ff88 skal ha være på sitt sterkeste ved midten av forløpningen
#ff00ff 100% definerer at fargen a050e8 skal ha være på sitt sterkeste (igjen) helt på slutten av forløpningen
aspect-ratio: 8/1 gjør at boksens høyde blir 1/8 av bredden. Jeg kunne også satt en høyde med height, men på denne måten så ser boksen ganske lik ut i ulike skjermoppløsninger.
border-radius: 1vw gir avrundede hjørner. Ved å bruke viewport width enheter så blir størrelsen på avrundingen avhengig av skjermstørrelsen.

Tekst med fargeforløpning

Å farge tekst med en fargeforløpning gir en stilig effekt (men den bør brukes med forsiktighet – nettsiden bør alltid være godt lesbar!)

Demonstrerer fargeforløpning i tekst

Eksempel på bruk

h3 {
	background-image: linear-gradient(15deg, #a050e8 0%, #00ff88 65%, #a050e8 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

Fargeløpninger i CSS hos Ståles notater

For å lage tekst med en fargegradient så kan du bruke CSS til å

legge til en gradient som et bakgrunnsbildet på HTML elementet
clippe bakgrunnen til akkurat det området der teksten er. Dessverre er background-clip en uoffisiell CSS-egenskap. For at den skal virke i de fleste nettlesere må du derfor bruke både background-clip og -webkit-background-clip.
bruke en transparent farge på skriften for å se bakgrunnen bak

OBS! Bruk en fallback bakgrunnsfarge!
Siden det ikke er absolutt alle nettlesere som kan vise fargeforløpninger på tekst så er det lurt å legge til background-color: FARGENAVN før background-image: linear-gradient(). Hvis nettleseren ikke klarer å vise fargeforløpningen kan den da vise fargen du har definert i background-color.

Magisk tekst

See the Pen Magic text by stalegjelsten (@stalegjelsten) on CodePen.

Magisk tekst hos Ståles notater